<template>
	<view class="content">
		<scroll-view :scroll-top="scrollTop" class="cate-left" scroll-y="true" show-scrollbar="false">
			<view class="cate-item" :class="{active:current==index}" v-for="(item,index) in cateList"
				@click="menuTab(index)" :key="item.id">
				{{item.catename}}
			</view>
		</scroll-view>
		<view class="cate-right">
			<scroll-view :scroll-top="scrollTopB" :scroll-into-view="'cate'+tempCurrent" class="cate-right-scroll" scroll-y="true"
				show-scrollbar="false" @scroll="getCurrentHeight">
				<view :id="'cate'+index" v-for="(item,index) in cateList" :key="item.id" class="cate-right-item">
					<view class="cate-title">
						--<text>{{item.catename}}</text>--
					</view>
					<view v-for="(el,index) in item.product" :key="el.id" class="cate-right-img">
						<!-- <image :src="imgUrl + el.mainimage"></image> -->
						<text>{{el.smalltitle}}</text>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList: [{
					id: 1,
					catename: '类A',
					product: [{
						id: 1,
						smalltitle: '产品A'
					}, {
						id: 2,
						smalltitle: '产品B'
					}, {
						id: 3,
						smalltitle: '产品C'
					}, {
						id: 4,
						smalltitle: '产品D'
					}, {
						id: 5,
						smalltitle: '产品E'
					}, {
						id: 6,
						smalltitle: '产品F'
					}, {
						id: 7,
						smalltitle: '产品G'
					}, {
						id: 8,
						smalltitle: '产品H'
					}, {
						id: 9,
						smalltitle: '产品I'
					}, {
						id: 10,
						smalltitle: '产品J'
					}, {
						id: 11,
						smalltitle: '产品K'
					}, {
						id: 12,
						smalltitle: '产品L'
					}, {
						id: 13,
						smalltitle: '产品M'
					}, {
						id: 14,
						smalltitle: '产品N'
					}, {
						id: 15,
						smalltitle: '产品O'
					}]
				}, {
					id: 2,
					catename: '类B',
					product: [{
						id: 1,
						smalltitle: '产品AA'
					}, {
						id: 2,
						smalltitle: '产品BB'
					}, {
						id: 3,
						smalltitle: '产品CC'
					}, {
						id: 4,
						smalltitle: '产品DD'
					}, {
						id: 5,
						smalltitle: '产品EE'
					}, {
						id: 6,
						smalltitle: '产品FF'
					}, {
						id: 7,
						smalltitle: '产品GG'
					}, {
						id: 8,
						smalltitle: '产品HH'
					}]
				}, {
					id: 3,
					catename: '类C',
					product: [{
						id: 1,
						smalltitle: '产品AAA'
					}, {
						id: 2,
						smalltitle: '产品BBB'
					}, {
						id: 3,
						smalltitle: '产品CCC'
					}, {
						id: 4,
						smalltitle: '产品DDD'
					}, {
						id: 5,
						smalltitle: '产品EEE'
					}, {
						id: 6,
						smalltitle: '产品FFF'
					}, {
						id: 7,
						smalltitle: '产品GGG'
					}, {
						id: 8,
						smalltitle: '产品HHH'
					}]
				}], //左侧分类列表
				current: 0, //当前点击项
				rectInfoList: [],
				tempCurrent: 0,
				scrollTop: 0, //左侧导航栏距离顶部的位置
				scrollTopB: 0,
				cateListA: []
			}
		},
		onLoad() {
			console.log(this.rectInfoList)
			setTimeout(() => {
				this.getRectInfo();
			}, 200)
		},
		methods: {
			menuTab(index) {
				if (index === this.current) return
				this.current = index
				this.scrollTopB = this.rectInfoList[index].top
			},
			// 获取与顶部之间的距离
			getRectInfo() {
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for (var i = 0; i < this.cateList.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate" + i);
					view.fields({
						size: true,
						rect: true
					}, data => {
						top = temp;
						bottom = top + data.height;
						temp = bottom;
						this.rectInfoList[i] = {
							'top': top,
							'bottom': bottom
						}
						console.log(top, bottom);
					}).exec();
				}
				console.log(this.rectInfoList);
			},
			getCurrentHeight(e) {
				console.log('e',e)
				var currentHeight = e.detail.scrollTop;
				this.rectInfoList.forEach((item, index) => {
					if (currentHeight >= item.top && currentHeight <= item.bottom) {
						// 当前获取的盒子高度大于top小于bottom，判定将索引传至左侧菜单导航
						this.current = index;
						// this.scrollTop = index * uni.upx2px(100);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		height: calc(100vh - 88upx);
		overflow: hidden;
	}

	.cate-left {
		box-sizing: border-box;
		width: 180upx;
		font-size: 28upx;
		background-color: rgba(0, 0, 0, .02);

		// border-right: 1px solid red;
	}

	.cate-item {
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		// border-bottom: 1px solid red;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.active {
		border-left: 2px solid red;
		background-color: #fff;
	}

	.cate-right {
		flex: 1;

		.cate-right-scroll {
			height: 100%;

			.cate-title {
				font-size: 14px;
				color: darkgray;
				text-align: center;
			}

			.cate-right-img {
				display: inline-block;
				width: 120px;
				height: 80px;
			}
		}

	}
</style>